<!DOCTYPE html>
<html lang="zh-CN">

<head>
   <meta charset="utf-8">
    <title>{{ title }}</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0">
    <meta name="imagemode" content="force">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="description" content="">
    <meta name="keywords" content="">
   
    <!-- inject:css -->

    <link rel="stylesheet" href="/css/all.min.css">
    <link rel="stylesheet" href="/css/theme.css">
    <!-- endinject -->

</head>

<body>



     <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <section id="profile" class="swiper-slide">
                <div>
                    <figure id="portrait">
                        <img class="animated" src="./images/man.png" alt="placeholder+image" style="display:none" >
                        <figcaption>
                            <h2 style="display:none" class="animated"><span>{{user.firstName}}</span> {{user.lastName}}</h2>
                            <p style="display:none" class="animated">{{user.position}}</p>
                        </figcaption>
                        
                    </figure>

                    <div id="info-mini" style="display:none" class="contact animated">
                        <ul>
                            <li><i class="icon iconfont icon-mobil"></i>{{card.mobile}}</li>
                            <li><i class="icon iconfont icon-email"></i>{{card.email}}</li>
                            <li data-url="tel:{{card.telephone}}"><i class="icon iconfont icon-telephone"></i>{{card.telephone}}</li>
                        </ul>
                    </div>

                    <div id="social">
                        <ul>
                            <li style="display:none; animation-duration:0.8s;animation-delay:1s;" class="animated"><a href="javascript:;"><i class="icon iconfont icon-favour"></i><span class="hidden">colect</span></a></li>
                            <li style="display:none;animation-duration:0.8s;animation-delay:.5s;" class="animated"><a href="javascript:;"><i class="icon iconfont icon-share"></i><span class="hidden">share</span></a></li>
                            <li style="display:none;animation-duration:0.8s;animation-delay:1s;" class="animated"><a href="javascript:;"><i class="icon iconfont icon-loop"></i><span class="hidden">send back</span></a></li>
                        </ul>
                    </div>
                
                </div>
                

            </section> 
            <section id="info-page" class="swiper-slide">
                <ul>
                    <li>
                        <figure>
                            <img style="display:none;" class="animated" src="./images/man.png" alt="">
                            <figcaption>
                                <h2 style="display:none;" class="animated"><span>{{user.firstName}}</span> {{user.lastName}}</h2>
                                <p style="display:none; animation-duration:0.8s;animation-delay:.2s;" class="animated">{{user.position}}</p>
                            </figcaption>
                        </figure>
                    </li>
                   <li class="animated" data-url="tel:{{card.mobile}}"><i class="icon iconfont icon-mobil"></i>{{card.mobile}}</li>
                   <li class="animated" data-url="tel:{{card.telephone}}"><i class="icon iconfont icon-telephone"></i>{{card.telephone}}</li>
                   <li class="animated" ><i class="icon iconfont icon-fax"></i>{{card.fax}}</li>
                   <li class="animated" data-url="mailto:{{card.email}}"><i class="icon iconfont icon-email"></i>{{card.email}}</li>
                   <li class="animated" data-url="http://{{card.web}}"><i class="icon iconfont icon-web"></i>{{card.web}}</li>
                   <li class="animated"><i class="icon iconfont icon-twitter"></i>{{card.twitter}}</li>
                   <li class="animated"><i class="icon iconfont icon-facebook"></i>{{card.facebook}}</li>
                   <li class="animated"><i class="icon iconfont icon-mark-fill"></i>{{card.address}}</li>
                   <li class="animated">
                         <figure>
                             <div id="qr-code"></div>
                             <figcaption>
                                <p>Long press two-dimensional code <br/>save to address book</p>
                            </figcaption>
                         </figure>

                    </li>
                </ul>
            </section> 
            <section id="company" class="swiper-slide">
                
                <figure>
                    <img src="./images/company.png" alt="complay logo">
                    <figcaption>
                        <p>Hello there! I'm Álvaro Trigo Currently creating beautiful stuff in Cambridge, UK.</p>
                    </figcaption>
                </figure>
               
              
                
            </section>
             <section id="content-wrapper" class="swiper-slide">
                
                <p>I'm a web developer who aims to combine the beauty of design with the logical perfection of coding. Training myself every day and pushing my own limits to discover new ways of creating a great experience for the users.</p>
                
            </section>
            
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div> 
    </div>

    <div id="mask" class="hidden">
        <div id="note">
            <p>Long press two-dimensional code <br/>save to address book</p>
            <i class="icon iconfont icon-close"></i>
        </div>
        
    </div>

   

   

    <!-- inject:js -->
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bundle.min.js"></script>
    <script src="/js/index.js"></script>
    <!-- endinject -->
    
</body>

</html>